<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h3 {
            padding: 20px 10px;
        }

        li {
            list-style: none;
        }

        .list li {
            line-height: 45px;
            text-indent: 10px;
            border: 1px solid #333;
        }

        .list li+li {
            border-top: 0;
        }

        .buttonGroup {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 id="title">批量操作元素</h3>
        <div class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </div>
    </div>
    <div class="buttonGroup">
        <button class="setHtml">
            设置html
        </button>
        <button class="getHtml">
            获取html
        </button>
        <button class="hide">隐藏</button>
        <button class="show">显示</button>
        <button class="setWidth">
            设置宽度
        </button>
        <button class="getWidth">
            获取宽度
        </button>
        <button class="attr">attr</button>
        <button class="prop">prop</button>
        <button class="css">css</button>
        <button class="addClass">addClass</button>
        <button class="removeClass">removeClass</button>
        <button class="eq">eq</button>
        <button class="siblings">siblings</button>
        <button class="chain">链式操作</button>
    </div>
</body>
<script>
    function GetEle(selector) {
        this.eles = document.querySelectorAll(selector);
    }
    GetEle.prototype.html = function (con) {
        if (arguments.length >= 1) {
            this.each(function (ele, index) {
                ele.innerHTML = con;
            })
            return this;
        } else {
            return this.eles[0].innerHTML;
        }
    }
    /* GetEle.prototype.get = function(){
        alert()
    } */
    GetEle.prototype.text = function (con) {
        if (arguments.length >= 1) {
            this.each(function (ele, index) {
                ele.innerText = con
            })
            return this;
        } else {
            return this.eles[0].innerText;
        }
    }
    GetEle.prototype.val = function (con) {
        if (arguments.length >= 1) {
            this.each(function (ele, index) {
                ele.value = con
            })
            return this;
        } else {
            return this.eles[0].value;
        }
    }
    GetEle.prototype.hide = function () {
        this.each(function (ele, index) {
            ele.style.display = "none";
        })
        return this;
    }
    GetEle.prototype.show = function () {
        this.each(function (ele, index) {
            ele.style.display = "block";
        })
        return this;
    }
    GetEle.prototype.addClass = function (classCon) {
        if (arguments.length >= 1) {
            var list = classCon.split(/\s/g);
            this.each(function (ele) {
                ele.classList.add(...list);
            })
        }
        return this;
    }
    GetEle.prototype.removeClass = function (classCon) {
        if (arguments.length >= 1) {
            var list = classCon.split(/\s/g);
            this.each(function (ele) {
                ele.classList.remove(...list);
            })
        }
        return this;
    }
    GetEle.prototype.each = function (fn) {
        for (var i = 0; i < this.eles.length; i++) {
            var ele = this.eles[i];
            var index = i;
            fn.call(ele, ele, index);
        }
        return this;
    }
    GetEle.prototype.on = function (eventType, fn) {
        // this -> 调用此方法的实例化对象  {eles:[]}
        // for (var i = 0; i < this.eles.length; i++) {
        //     var ele = this.eles[i];
        //     var index = i;
        //     try {
        //         ele.addEventListener(eventType, fn);
        //     } catch (err) {
        //         ele.attachEvent("on" + eventType, fn);
        //     }
        // }
        this.each(function (ele) {
            try {
                ele.addEventListener(eventType, fn);
            } catch (err) {
                ele.attachEvent("on" + eventType, fn);
            }
        })
        return this;
    }
    GetEle.prototype.click = function (fn) {
        this.on("click", fn);
        return this;
    }
    function $(selector) {
        return new GetEle(selector);
        return this;
    }

    GetEle.prototype.width = function (con) {
        if (arguments.length >= 1) {
            this.each(function (ele) {
                var reg = /^\d+(px|%|pt|em|rem|vw|vh)$/;
                if (reg.test(con)) {
                    ele.style.width = con;
                } else {
                    ele.style.width = con + "px";
                }
            })
            return this;
        } else {
            return parseInt(this.getStyle("width"))
        }
    }
    GetEle.prototype.height = function (con) {
        if (arguments.length >= 1) {
            this.each(function (ele) {
                var reg = /^\d+(px|%|pt|em|rem|vw|vh)$/;
                if (reg.test(con)) {
                    ele.style.height = con;
                } else {
                    ele.style.height = con + "px";
                }
            })
            return this;
        } else {
            return parseInt(this.getStyle("height"))
        }
    }

    // attr()    获取和设置 html属性(属性节点)
    // attr("data-index","0")     有两个参数 => 设置
    // attr("data-index")         一个参数 => 获取  
    GetEle.prototype.attr = function(key, val){
        if(arguments.length >= 2){
            this.each(function(ele){
                ele.setAttribute(key,val)
            })
        }else{
            return this.eles[0].getAttribute(key);
        }
    }

    // prop()    获取和设置 元素节点的属性 ele.id
    // prop("id","demo")  有两个参数 => 设置
    // prop("id")         一个参数 => 获取  
    GetEle.prototype.prop = function (key, val) {
        // this -> 调用此方法的实例化对象  {eles:[]}   -> 也可以访问原型对象(prototype)所有的方法
        if (arguments.length >= 2) {
            this.each(function (ele) {
                ele[key] = val;
            })
        } else {
            return this.eles[0][key];
        }
    }

    GetEle.prototype.css = function (attr, val) {
        if (arguments.length >= 2) {
            this.each(function (ele) {
                ele.style[attr] = val;
            })
            return this;
        } else {
            if (attr.constructor === Object) {
                for (var key in attr) {
                    var val = attr[key];
                    this.css(key, val);
                }
                return this;
            } else {
                return this.getStyle(attr);
            }
        }
    }

    GetEle.prototype.getStyle = function (attr) {
        var ele = this.eles[0];
        try {
            return window.getComputedStyle(ele)[attr];
        } catch (err) {
            return ele.currentStyle[attr];
        }
    }

    GetEle.prototype.eq = function (index) {
        var ele = this.eles[index];
        this.eles = [ele];
        return this;
    }

    GetEle.prototype.siblings = function (index) {
        var ele = this.eles[0];
        var parentEle = ele.parentElement;
        var children = parentEle.children;
        var list = Array.from(children).filter(item => item !== ele);

        this.eles = list;
        return this;
    }

    $(".eq").click(function () {
        // console.log($(".list li").eq(2));
        $(".list li").eq(2).css({ background: "red" });
    });

    $(".siblings").click(function () {
        console.log($(".list li").eq(2).sibling);
        $(".list li").eq(2).siblings().css({ background: "blue" });
    })
    $(".attr").click(function(){
        $(".list li").attr("class", "ppp")
    })
    $(".prop").click(function(){
        console.log(111);
        $(".list li").prop("class", "fff")
    })

    //链式操作
    $(".chain").click(function () {
        console.log($(".list li").eq(2));
        $(".list li").css({ textAlign: "center" }).eq(2).html("6666").width(100).click(function () { console.log(111, this); }).siblings().html("2222").width(180).height(60).click(function () { console.log(222, this); })
    })


</script>

</html>